<template>
  <div>
    <div class="table-page-search-wrapper">
      <a-form-model
        ref="formModel"
        :model="form"
        layout="inline"
        :rules="{
          name: [
            {
              validator: validators.noWhitespace(),
              trigger: 'change',
            },
            {
              validator: validators.noIllegalString(),
              trigger: 'change',
            },
            {
              max: 10,
              message: '长度在 1 到 10 个字符',
              trigger: 'change',
            },
          ],
        }"
      >
        <a-row
          :gutter="[16, 16]"
          type="flex"
          justify="end"
        >
          <a-col
            :md="6"
            :sm="8"
          >
            <a-form-model-item
              prop="name"
              label="资源名称"
            >
              <a-input
                autocomplete="off"
                v-model="form.name"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <span
            style="float: left; overflow: hidden"
            class="table-page-search-submitButtons"
          >
            <a-col
              :md="12"
              :sm="24"
            >
              <a-button
                type="primary"
                @click="loadData(true)"
                icon="search"
              >
                查询
              </a-button>
              <a-button
                @click="resetSearchForm"
                icon="reload"
                style="margin-left: 8px"
              >
                重置
              </a-button>
            </a-col>
          </span>
        </a-row>
      </a-form-model>
    </div>

    <a-table
      ref="table"
      rowKey="id"
      size="middle"
      :columns="columns"
      :dataSource="gDataSource"
      :pagination="gPagination"
      @change="gHandleTableChange"
    >
      <span
        slot="sortCol"
        slot-scope="text, record, index"
      >
        {{
          (gPagination.current - 1) * gPagination.pageSize + parseInt(index) + 1
        }}
      </span>
    </a-table>
  </div>
</template>

<script>
  import moment from "moment";
  import { GwListMixin } from "@/mixins/GwListMixin";
  import { gPostAction } from "@/api/manage";

  export default {
    name: "cluster",
    mixins: [GwListMixin],
    data() {
      return {
        // 表头
        columns: [
          {
            title: "序号",
            dataIndex: "",
            key: "rowIndex",
            width: 50,
            scopedSlots: { customRender: "sortCol" },
          },
          {
            title: "容器集群名称",
            dataIndex: "name",
          },
          {
            title: "资源类型",
            dataIndex: "typeName",
          },
          {
            title: "数据中心",
            dataIndex: "datacenterName",
          },
          {
            title: "创建时间",
            dataIndex: "createTime",
            customRender: function (t, r, index) {
              return moment(t).format("YYYY-MM-DD HH:mm:ss");
            },
          },
          // {
          //   title: "操作",
          //   dataIndex: "action",
          //   scopedSlots: { customRender: "action" },
          // },
        ],
        form: {
          name: "",
        },
      };
    },
    mounted() {
      this.loadData();
    },
    methods: {
      loadData(isDoSearch) {
        this.$refs.formModel.validate((error) => {
          if (!error) {
            return;
          }
          this.gQueryParam.name = this.form.name;
          if (isDoSearch) {
            this.gQueryParam.pageNo = 1;
            this.gPagination.current = 1;
          }
          this.gQueryParam.title = "精确管控与供电制冷联动-基础资源细粒度感知-计算管理-容器集群管理";
          this.gQueryParam.content = "查询容器管理列表";
          gPostAction("/cloud_resource/page", this.gQueryParam).then((res) => {
            if (res.success) {
              const data = res.data;
              if (data && data.list) {
                this.gDataSource = data.list;
                this.gPagination.total = data.totalCount;
              }
            }
          });
        });
      },
      resetSearchForm() {
        this.form.name = "";
        this.$refs.formModel.resetFields();
      },
    },
  };
</script>